/*
 * 新增产品
 * @Author: ljb
 * @Date: 2018-03-27 17:53:51
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-06-20 10:11:13
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-video-create {
        min-height: 600px;
    }

</style>
<template>
	<div class="v-admin-video-create">
		<Row
			type="flex"
			justify="start">
			<i-col push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="80">

					<Form-item
						label="视频类别"
						prop="video_type_id">
						<Select
							v-model="formValidate.video_type_id"
							clearable
							filterable>
							<Option
								v-for="( value , key ) in videoTypes"
								:value="key + ''"
								:key="key">{{ value }}</Option>
						</Select>
					</Form-item>

					<Form-item
						label="视频名称"
						prop="name">
						<i-input
							v-model="formValidate.name"
							type="text"
							placeholder="请输入名称" />
					</Form-item>

					<Form-item
						label="优先级"
						prop="sort">
						<InputNumber
							:max="100"
							:min="1"
							v-model="formValidate.sort"
							placeholder="请输入视频优先级"/>
					</Form-item>

					<Form-item
						label="封面图"
						prop="preview_img">
						<Upload
							:before-upload="file=>fileChange(file,'preview_img','image_info')"
							:on-remove="file=>fileChange(file,'preview_img','image_info')"
							:multiple="false"
							accept="image/jpg, image/jpeg, image/png"
							action="//fake_upload_url/">
							<Button
								type="ghost"
								icon="ios-cloud-upload-outline">上传图片</Button>
							<div
								v-if="image_info.name"
								slot="tip"
								class="license-tip">{{ image_info.name }}</div>
								<!-- <div class="license-tip" slot="tip" v-else>图片规格为320 x 134的jpg、jpeg或png，大小不超1.5M</div> -->
						</Upload>
					</Form-item>

					<Form-item
						label="视频路径"
						prop="url">
						<!-- bos上传按钮组件 -->
						<bos-upload
							ref="bos_upload"
							:bos-config="bosConfig"
							@progress="changeProgress"
							@setKey="setBosKey"
							@post="dataPost"
							@validate="isValidateVideo"/>
						<p>视频为mp4格式</p>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('formValidate')">提交</Button>
						<Button
							type="ghost"
							style="margin-left: 8px"
							@click="handleReset('formValidate')">重置</Button>
					</Form-item>

				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>

// import API_LIST from 'src/API_LIST';

import { mapMutations } from 'vuex';
import bosUpload from 'src/views/component/bosupload';
import { validateImage } from 'src/validate'; // 引入校验文件

export default {
	name: 'VideoCreate',
	components: {
		bosUpload,
	},

	props: {
		videoTypes: {
			type: Object,
			required: true,
		},
		bosConfig: {
			type: Object,
			required: true,
		},
	},

	data() {
		return {

			formValidate: {
				name: '',

				video_type_id: '',

				url: '',

				preview_img: '',

				sort: 1,
			}, // 新建视频时的表单

			ruleValidate: { // 表单验证规则
				name: [
					{ required: true, message: '视频名称不能为空', trigger: 'blur,change' },
				],
				video_type_id: [
					{ required: true, message: '视频类别不能为空', trigger: 'blur,change' },
				],
				preview_img: [
					{ required: true, validator: validateImage, trigger: 'blur,change' },
				],
				sort: [
					{
						required: true, type: 'number', message: '优先级不能为空', trigger: 'blur,change',
					},
				],
			},

			// 上传的图片信息
			image_info: {
				name: '',
				url: '', // 这个地方可以 base64 编码的图片，然后给 modal 框去显示图片
			},

			validate_video: false, // 视频格式的校验
		};
	},
	methods: {

		...mapMutations('spinShow', [
			'showSpin',
			'close',
		]),

		/**
         * bos-upload组件文件校验通过
         * @param  {string} value {组件返回的信息}
         * @return {Boolean} {true代表通过，false代表不通过}
         */
		isValidateVideo(value) {
			this.validate_video = value;
		},

		/**
         * 设置bos_key
         * @param  {string} value {需要设置给bos_key的值}
         * @return {undefined} {description}
         */
		setBosKey(value) {
			this.formValidate.url = value;
		},

		/**
         * bos上传进度显示
         * @param  {string} value {需要设置给bos_key的值}
         * @return {undefined} {description}
         */
		changeProgress(progress) {
			const load_info = `上传中，进度：${progress}%`;

			this.showSpin(load_info);
		},

		/**
         * file类型input改变
         * @param  {Object} file {选择的文件对象}
         * @return {Boolean} {false则会停止上传}
         */
		fileChange(file, param, info) {
			this[info].name = file.name;

			this.formValidate[param] = file;

			return false;
		},

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid && this.validate_video) {
					this.$refs.bos_upload.bos_uploader.start();
				} else {
					this.$Message.error('存在未填写的条目!');
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();

			this.formValidate.preview_img = '';

			this.image_info.name = '';
		},

		/**
         * post数据
         * @return {undefined}
         */
		dataPost() {
			const form_data = this.formDataCreate();

			this.$emit('post', form_data);
		},

		/**
         * 手动拼接formdata数据
         * @return {Object} {拼接好的formdata数据}
         */
		formDataCreate() {
			const new_object = {

				name: this.formValidate.name,

				video_type_id: this.formValidate.video_type_id,

				url: this.formValidate.url,

				description: this.formValidate.description,

				preview_img: this.formValidate.preview_img,

				detail: this.formValidate.detail,

				sort: this.formValidate.sort,
			};

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				form_data.append(key, new_object[key]);
			});

			return form_data;
		},

	},
};
</script>
